<template>
	<block>
		<view class="page_box">
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="carousel-section">
					<!-- #ifdef APP-PLUS -->
					<view class="topPlace"></view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="place" style="width: 100%;height: 80rpx;"></view>
					<!-- #endif -->
				</view>
				<!-- 头部轮播与分类 -->
				<view class="menu-category-box" v-if="cate && cate.length"
					:style="cate.length <= 4 ? `height:390rpx` : `height:390rpx`">
					<!-- 轮播 -->
					<swiper class="menu-swiper-box" :style="cate.length <= 4 ? `height:320rpx` : `height:320rpx`"
						:autoplay="true" :circular="true" :interval="6000" :duration="2000">
						<swiper-item class="menu-swiper-item" v-for="(itemList, index) in cate" :key="index"
							:style="cate.length <= 4 ? `height:340rpx` : `height:340rpx`">
							<view class="menu-tab-box">
								<view class="tab-list y-f" :style="{ width: '100%' }">
									<image class="tab-img" style="border-radius: 0; width: 120%;" :src="itemList.path"></image>
									<text>{{ itemList.name }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- 分类 -->
					<view class="menu-category-dots" v-if="cate[0].length > 1">
						<text :class="categoryCurrent == index ? 'category-dot-active' : 'category-dot'"
							v-for="(dot, index) in cate.length" :key="index"></text>
					</view>
				</view>
				<!-- 为你推荐 -->
				<view class="hot-goods  jui_pad_2432">
					<!-- 分类 -->
					<view class="fq-layout"
						style="padding-bottom: 18rpx;border-bottom: 2rpx solid #ccc;overflow-x: auto;white-space: nowrap;">
						<view
							style="overflow-x: auto;white-space: nowrap; width: 100%; display: flex; align-items: center; justify-content: center;">
							<view class="jui_mar_r20" style="flex: 1;" v-for="(item, index) in tabList" :key="index"
								@tap="chooseTab(item, index)">
								<view class="fq-img">
									<img style="width: 100%; height: 100%;" :src='item.path' />
								</view>
								<view class="jui_fc_333" style="width: 100%; text-align: center;"
									:class="index == tabIndex ? 'jui_font_w600 jui_fs34' : 'jui_fs30 jui_mar_t8'">
									{{ item.name }}
								</view>
								<view style="margin: 0 auto;" :class="index == tabIndex ? 'linel jui_mar_t12' : ''">
								</view>
							</view>
						</view>
					</view>
					<view class="jui_h30"></view>
					<!-- 公告 -->
					<view class="notice-frame">
						<img style="height:26rpx; width: 130rpx;" :src="getImg()" />
						<swiper style="width:556rpx;height:48rpx;line-height: 48rpx;" vertical="true"  :autoplay="true"
							 circular="true"  interval="2000">
							<swiper-item class="menu-swiper-item" v-for="(item, index) in noticeList" :key="index"
								:style="cate.length <= 4 ? `height:200rpx` : `height:340rpx`">
								<navigator class="goods-box" :url="'/pages/home/goodsDetail/noticeList'">
									<view class="notice-title">{{item.title}}</view>
								</navigator>

							</swiper-item>
						</swiper>
					</view>
					<view class="jui_h30"></view>
					<!-- 商品列表 -->
					<view class="goods-list x-f">
						<view class="goods-item" v-for="(item, index) in list" :key="index">
							<navigator class="goods-box" :url="'/pages/home/goodsDetail/goodsDetail?id=' + item.id+'&categoryId='+item.categoryId+'&img='+item.attachs+'&hbzj='+item.cnyprice+'&hbzjsz='+item.ydysprice">
								<view class="img-box">
									<!-- 图片方式 -->
									<image class="img" :src="item.attachs" :lazy-load="true" mode="aspectFill"></image>
								</view>
								<view class="title one-t">{{ item.name}}</view>
								<view class="price-box">
									<view class="flex x-bc align-end">
										<view class="sales miso-font">销量{{ zhuan(item.sales) }}件</view>
										<view>
											<view v-if="item.categoryId == 'A1201'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1202'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1203'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1204'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1202' || item.categoryId == 'A1203' || item.categoryId == 'A1204'" class="current" style="font-size: 12px; color: #ccc;">
												<span style="text-decoration:line-through; ">{{item.marketPrice}}</span>
											</view>
											<view class="goods-money" style="display: flex; align-items: center;">
												<view class="icon-money">￥</view>
												{{item.ismember ? item.ydysmemberPrice : item.ydysmarketPrice}}
											</view>
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
					<!-- 加载状态 -->
					<view class="cu-load text-gray" :class="loadStatus" v-if="list.length > 0"></view>
					<!-- 暂无数据 -->
					<empty position="jui_static" v-if="list.length < 1"></empty>
					<view class="cu-load load-modal" v-if='downShow'>下载中,请勿进行其他操作！</view>
				</view>
				<!-- 为您推荐end -->
				<view class="foot_box"></view>
			</scroll-view>
		</view>
	</block>
</template>

<script>
	import rfBackHome from '../../components/rf-back-home/index.vue';
	import baseUrl from '@/api/global.js'
	import Tool from '@/tool/tool.js'
	export default {
		components: {
			rfBackHome
		},
		data() {
			return {
				effective: '',
				allUrl: baseUrl,
				banner: [],
				cate: [],
				goods: [],
				searchVal: '',
				categoryCurrent: 0,
				tabList: [],
				tabIndex: 0,
				q: {
					id: '',
					page: 1,
					page_num: 20,
					type: 1
				},
				isLoading: true,
				hasMore: true,
				loadStatus: '',
				list: [],
				advertHy: [],
				noticeList: [],
				show: false,
				downShow: false,
			};
		},
		onShow() {
			//显示页面视图
		},
		onLoad() {
			let rectInfo = uni.getSystemInfoSync();
			// #ifdef APP-PLUS
			let appVersion = plus.runtime.version
			var clientType = plus.os.name == 'Android' ? 'android' : 'ios';
			let params = {
				type: clientType,
				userId: uni.getStorageSync('uid'),
				_token: uni.getStorageSync('token')
			}
			this.$api.getCode(params).then(res => {
				if(res.ok&&res.data){
					let down = res.data.down;
					let appversion = res.data.appversion;
					if(appVersion !== appversion){
						uni.showModal({
							title:'发现新版本',
							content:'确认下载更新',
							success(res) {
								if(res.confirm){
									// #ifdef APP-PLUS
									if (clientType=="android") {
										uni.showLoading({
											title: '更新中……',
											mask: true
										})
										//执行下载APP操作，下载完成APP立即安装APP之后更新完成
										uni.downloadFile({ 
											url: down,  //下载地址
											success: downloadResult => { //下载成功
												uni.hideLoading();
												if (downloadResult.statusCode == 200) {
													// #ifdef APP-PLUS
													plus.runtime.install( //安装				                       
														downloadResult.tempFilePath, {
															force: false
														},
														function(res) {
															plus.runtime.restart();					                    
														},
														function(err){
															console.log(err)					
														}
													);
													// #endif
												}
											}
										});
									}else{  
										//ios
										plus.runtime.openURL(url) //url:app对应的apple store地址
									}
									// #endif
								}
							}
						})
					}
				}
			})
			// #endif
			this.init();
			this.loadStatus = true
		},
		onReachBottom() {
			if(this.hasMore){
				this.getListMore()
			}
		},
		methods: {	
			install(fileUri) {
				plus.downloader.createDownload(
						fileUri, {
							filename: '_doc/update/'
						},
						function(d, status) {
							if (status == 200) {
								plus.runtime.install(
									d.filename, {
										force: true
									},
									function() {
										plus.nativeUI.closeWaiting();
										plus.nativeUI.alert('应用资源更新完成！', function() {
											plus.runtime.restart();
										});
									},
									function(e) {
										plus.nativeUI.closeWaiting();
										console.log('安装文件失败[' + e.code + ']：' + e.message);
									}
								);
							} else {
								console.log('下载失败！');
							}
							plus.nativeUI.closeWaiting();
						}
					)
					.start();
			},
			forceUpdate(){
			    let that = this;
			    uni.request({
			        url:url,
			        method:method,
			        success:result=>{
			            if(result.force){ //强制更新
			                plus.runtime.getProperty(plus.runtime.appid,function(inf){
			                    if(inf.version !== res.version){ //判断版本号是否一致
			                        uni.showModel({
			                            title:"发现新版本",
			                            content:"确认下载更新",
			                            showCancel:false,
			                            success:(res)=>{
			                                if (res.confirm == true) {//当用户确定更新，执行更新
											    // #ifdef APP-PLUS
												if (plus.os.name=="Android") {
												    uni.showLoading({
												        title: '更新中……'
													})
													uni.downloadFile({ //执行下载
														url: url,  //下载地址
														success: downloadResult => { //下载成功
													        uni.hideLoading();
															if (downloadResult.statusCode == 200) {
															    // #ifdef APP-PLUS
																plus.runtime.install( //安装				                       
																    downloadResult.tempFilePath, {
																	    force: false
																	},
																	function(res) {
																	    plus.runtime.restart();					                    
																	},
																	function(err){
																	    console.log(err)					
																	}
																);
																// #endif
															}
														}
													});
												}else{  //ios
												    plus.runtime.openURL(url) //url:app对应的apple store地址
												}
												// #endif
											}
			                            }
			                        })
			                    }
			                })
			            }
			        }
			    })
			},
			getImg() {
				let url = this.allUrl.baseUrl + '/app/images/notice.png'
				return url
			},
			init() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let params = {
					_token: _token,
					userId: userId,
					type: '1',
				}
				this.$api.myInfor(params).then(res => {
					if (res.ok&&res.data) {
						this.effective = res.data.effective
					}
				});
				this.$api.homeIndex(params).then(res => {
					if (res.ok&&res.data) {
						this.cate = res.data;
					}
				});
				this.$api.getRecommendClassify({
					_token: _token
				}).then(res => {
					if (res.ok&&res.data) {
						this.tabList = res.data;
						this.q.categoryId = res.data[0].id;
						this.getList();
					}
				});
				this.getNotice()
			},
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				oArr.forEach(c => {
					if (minArr.length === length) {
						minArr = [];
					}
					if (minArr.length === 0) {
						arr.push(minArr);
					}
					minArr.push(c);
				});

				return arr;
			},
			getList() {
				this.isLoading = true;
				let _token = uni.getStorageSync('token');
				this.q._token = _token
				this.q.page = 1
				this.$api.getClassifyShops(this.q).then(res => {
					this.isLoading = false;
					this.list = res.data.list
					this.hasMore = true;
					this.loadStatus = '';
				});
			},
			getListMore() {
				const that = this
				this.isLoading = true;
				let _token = uni.getStorageSync('token');
				this.q._token = _token
				this.q.page += 1
				this.$api.getClassifyShops(this.q).then(res => {
					this.isLoading = false;
					if (that.list.length == res.data.count) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
						this.hasMore = false;
						this.loadStatus = 'over';
						return false
					}else{
						that.list = that.list.concat(res.data.list)
					}
					
				});
			},
			onSearch() {
				uni.navigateTo({
					url: `/pages/home/search/search?keyword=${this.searchVal}`
				});
			},
			chooseTab(item, index) {
				if((!this.effective||!uni.getStorageSync('effective'))&&item.id==='A1202') {
					Tool.msg('您不是VIP会员，请先购买分套餐专区成为会员后再访问！')
					return
				}
				this.tabIndex = index;
				this.list = [];
				this.q.page = 1;
				this.q.categoryId = item.id;
				this.getList();
			},
			zhuan(num) {
				var that = this;
				if (num / 10000 > 1) {
					return (num / 10000).toFixed(2) + '万';
				} else {
					return num;
				}
			},
			// 公告
			getNotice() {
				let params = {
					type: '1'
				}
				this.$api.getNotice(params).then(res => {
					this.noticeList = res.data
				})
			},
		}
	};
</script>

<style lang="scss">
	.notice-frame {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	.fq-img {
		display: flex;
		width: 30px;
		height: 30px;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
		border: 0px solid #ccc;
		border-radius: 100%;
		overflow: hidden;
	}
	.goods-money {
		font-size: 13px;
		font-weight: 500;
		color: #00c2ff;
		line-height: 13px;
		margin-bottom: 8px;
	}
	.icon-money {
		width: 15px;
		border: 1px solid;
		border-radius: 100%;
		height: 15px;
		/* line-height: 12px; */
		text-align: center;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.notice-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	.hy-area-title {
		margin: 0 0 24rpx 0;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
	}
	// 分区
	.fq-layout {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.fq {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.kefu {
		position: fixed;
		width: 100rpx;
		/* #ifdef H5 */
		bottom: 200rpx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 80rpx;
		/* #endif */
		height: 100rpx;
		border-radius: 50%;
		background-color: #007aff;
		right: 20rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;

		text-align: center;
		font-size: 36rpx;
	}
	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: $zhuse;
	}
	.place {
		width: 100%;
		height: 40upx;
		background: $zhuse;
	}
	// 产品分类
	.menu-category-box {
		padding: 0rpx 0rpx 0 0rpx;
		background: #fff;
	}
	.menu-category-box uni-image{
		width: auto !important;
		min-width: 400px !important;
		height: 180px !important;
	}
	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		height: 185px !important;
		.menu-swiper-item {
			height: 100%;
			width: 100%;
		}
		.menu-tab-box {
			display: flex;
			flex-wrap: wrap;
			.tab-list {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 30rpx;

				.tab-img {
					border-radius: 100%;
					margin-bottom: 10rpx;
				}
			}
		}
		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 8rpx;
			.category-dot {
				width: 40rpx;
				height: 3rpx;
				background: #eeeeee;
				margin-right: 10rpx;
			}
			.category-dot-active {
				width: 40rpx;
				height: 3rpx;
				background: $zhuse;
				margin-right: 10rpx;
			}
		}
	}
	// 标题搜索栏
	.active {
		transition: all linear 0.3s;
	}
	.head_box {
		width: 750rpx;
		// background: #fff;
		transition: all linear 0.3s;
		/deep/.cuIcon-back {
			display: none;
		}
		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		.top {
			width: 100%;
			padding: 18upx 20upx 22upx;
			background: $zhuse;
			// #ifdef MP-WEIXIN
			padding-right: 28%;
			// #endif
		}
		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l{
				flex: 1;
				margin-right: 20upx;
				border-radius: 30upx;
				padding: 0 30upx;
				height: 60upx;
				background: #ffffff;
				background: rgba(255, 255, 255, 0.24);
				// opacity: 0.24;
				display: flex;
				align-items: center;
				image {
					width: 32upx;
					height: 32upx;
				}
				text {
					font-size: 28upx;
					color: #ffffff;
					margin-left: 10upx;
				}
				input {
					height: 100%;
					color: #ffffff;
					margin-left: 20upx;
					flex: 1;
				}
				.uni-input-placeholder {
					color: #ffffff;
				}
			}
			.r {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				image {
					width: 50upx;
					height: 50upx;
					display: block;
					// margin-bottom: 6upx;
				}
				text {
					font-size: 16upx;
					color: #fff;
					display: block;
				}
			}
		}
		position: relative;
		// padding-top: 10px;
		.bot {
			position: relative;
		}
		.titleNview-placing {
			position: absolute;
			height: 57%;
			background: linear-gradient(180deg, rgba(49, 139, 242, 1) 0%, rgba(57, 162, 242, 0.3) 100%) !important;
			width: 100%;
			border-bottom-left-radius: 13px;
			border-bottom-right-radius: 13px;
		}
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: 0.4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;
		padding: 0 20upx;
		position: relative;
		z-index: 9;
		// background-color: #FFFFFF;
		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	/* 分类 */
	.cate-section {
		padding: 24upx 20upx 0;
		.con {
			display: flex;
			// justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			// background: #fff;
			padding: 24upx 0upx 0;
			border-radius: 12upx;
		}
		.cate-item {
			width: 25%;
			margin-bottom: 24upx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28upx;
			color: #333;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 76upx;
			height: 76upx;
			margin-bottom: 10upx;
			border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	.adv-box {
		margin: 16rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		// overflow: hidden;
		.type2 {
			.type2-img1 {
				width: (710rpx/2);
				height: 340rpx;
				// border-right: 1rpx solid #f6f6f6;
			}
			.type2-box {
				flex: 1;
				height: 340rpx;
				width: (710rpx/2);

				.type2-img2 {
					height: (340rpx/2);
				}
			}
		}
	}
	.group-goods,
	.seckill-goods {
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;
		// overflow: hidden;
		.title-box {
			padding-bottom: 28rpx;
			padding-top: 12rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
			.group-people {
				.time-box {
					font-size: 26rpx;
					color: $zhuse;
					.count-text-box {
						width: 30rpx;
						height: 34rpx;
						background: $zhuse;
						text-align: center;
						line-height: 34rpx;
						font-size: 24rpx;
						border-radius: 6rpx;
						color: rgba(#fff, 0.9);
						margin: 0 8rpx;
					}
				}
				.head-box {
					.head-img {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #ccc;
					}
				}
				.tip {
					font-size: 28rpx;
					padding-left: 30rpx;
					color: #666;
				}
				.cuIcon-right {
					font-size: 30rpx;
					line-height: 28rpx;
					color: #666;
				}
			}
		}
		.goods-box {
			.goods-item {
				margin-right: 22rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
	.min-goods {
		width: 152rpx;
		background: #fff;
		margin-right: 20upx;
		.img-box {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;
			.tag {
				position: absolute;
				left: 0;
				bottom: 0rpx;
				z-index: 2;
				line-height: 35rpx;
				background: $zhuse;
				// background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
				// border-radius: 0px 18rpx 18rpx 0px;
				padding: 0 10rpx;
				width: 100%;
				// text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
			}
			.img {
				width: 100%;
				background-color: #ccc;
			}
		}
		.price-box {
			width: 100%;
			margin-top: 10rpx;
			.seckill-current {
				font-size: 30rpx;
				font-weight: 500;
				color: $fuse;
			}
			.original {
				font-size: 20rpx;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(153, 153, 153, 1);
				margin-left: 14rpx;
			}
		}
		.title {
			font-size: 26rpx;
		}
	}
	// 为你推荐
	.hot-goods {
		// margin: 0rpx 20rpx;
		// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
		border-radius: 32rpx;
		background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
		padding: 10rpx 0 0;
		.title {
			.title-img {
				width: 710rpx;
				height: 88rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		// .scroll-box{overflow-y: auto;height:100vh;}
		.goods-list {
			flex-wrap: wrap;
			width: 710rpx;
			.goods-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				width: 345rpx;
				box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
				border-radius: 20rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
		.goods-item-hy {
			margin-right: 8px;
			margin-bottom: 8px;
			width: 100%;
			// box-shadow: 0px 0px 4rpx 1rpx rgba(199,199,199,0.22);
			// border-radius: 8px;
		}
		.goods-box-hy {
			margin-bottom: 16rpx;
			// width: 345rpx;
			width: 100%;
			background: #fff;
			padding-bottom: 12rpx;
			// border-radius: 20rpx;
			overflow: hidden;
			.img-box {
				// width: 345rpx;
				width: 100%;
				height: 270rpx;
				overflow: hidden;
				position: relative;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				.tag-img {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					width: 80rpx;
					height: 40rpx;
				}
				.img {
					// width: 345rpx;
					width: 100%;
					height: 270rpx;
					// background-color: #ccc;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}
			}
		}
		.goods-box {
			width: 345rpx;
			background: #fff;
			padding-bottom: 12rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.img-box {
				width: 345rpx;
				height: 270rpx;
				overflow: hidden;
				position: relative;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				.tag-img {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					width: 80rpx;
					height: 40rpx;
				}
				.img {
					width: 345rpx;
					height: 270rpx;
					background-color: #ccc;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}
			}
			.tip {
				width: 346rpx;
				line-height: 56rpx;
				background: rgba(246, 242, 234, 1);
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0 20rpx;
			}
			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36rpx;
				// height: 72rpx;
				margin: 20rpx 20rpx 10rpx;
			}
			.price-box {
				padding: 10rpx 20rpx 0;
				width: 344rpx;
				.sales {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					line-height: 20rpx;
					margin-bottom: 20rpx;
				}
				.current {
					font-size: 30rpx;
					font-weight: 500;
					color: $fuse;
					line-height: 30rpx;
					margin-bottom: 20rpx;

					&:before {
						content: '￥';
						font-size: 26rpx;
					}
				}
				.original {
					font-size: 22rpx;
					font-weight: 400;
					text-decoration: line-through;
					color: rgba(153, 153, 153, 1);
					margin-left: 14rpx;
					line-height: 22rpx;
					margin-bottom: 10rpx;

					&:before {
						content: '￥';
						font-size: 20rpx;
					}
				}
				.tag-box {
					.discount {
						line-height: 28rpx;
						border: 1rpx solid rgba(225, 33, 43, 1);
						border-radius: 8rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(225, 33, 43, 1);
						padding: 0 8rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
